<script setup lang="ts">
import { ElIcon } from 'element-plus';
import { type ChessItem } from '@/utils/chess';
import CenterLayout from '@/components/CenterLayout.vue';
import MiddleLayout from '@/components/MiddleLayout.vue';
import { computed, ref } from 'vue';
import { useMouseInElement } from '@vueuse/core';
const props = defineProps<{
  content: ChessItem;
  next?: ChessItem;
}>();
const emit = defineEmits<{
  (event: 'put'): void;
}>();
const item = computed(() => ({
  preview: props.content == undefined,
  content: props.content ?? props.next,
}));
const itemRef = ref<HTMLElement>();
const mouse = useMouseInElement(itemRef);
</script>

<template>
  <div
    ref="itemRef"
    class="chess-item"
    :style="{
      color: item.preview
        ? mouse.isOutside.value
          ? 'transparent'
          : 'var(--el-color-primary)'
        : undefined,
    }"
    @click="item.preview && emit('put')"
  >
    <MiddleLayout>
      <CenterLayout>
        <ElIcon v-if="item.content == 'X'"> X </ElIcon>
        <ElIcon v-else-if="item.content == 'O'"> O </ElIcon>
      </CenterLayout>
    </MiddleLayout>
  </div>
</template>
<style scoped lang="scss">
.chess-item {
  font-size: 4rem;
  user-select: none;
  width: 80px;
  height: 80px;
  border-style: solid;
  border-width: 2px;
  border-color: var(--el-border-color);
  :hover {
    background-color: var(--el-border-color);
    cursor: pointer;
  }
}
</style>
